<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'ModelExperimental',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addModel();
        },
        methods: {
            initCesium() {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: true,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    }),
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addModel() {
                const origin = Cesium.Cartesian3.fromDegrees(105.0, 40.0, 0.0);
                const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
                const model = this.viewer.scene.primitives.add(Cesium.ModelExperimental.fromGltf({
                    url: 'http://localhost:8888/model/models/gltf/Xbot.glb',
                    show: true,                     // default
                    modelMatrix: modelMatrix,
                    scale: 1000000.0,                   // double size
                    minimumPixelSize: 128,          // never smaller than 128 pixels
                    maximumScale: 200000000,             // never larger than 20000 * model size (overrides minimumPixelSize)
                    runAnimations: true,//指定是否应启动模型中指定的glTF动画
                    clampAnimations: true,//指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
                    customShader: new Cesium.CustomShader({
                        lightingModel: Cesium.LightingModel.PBR,
                        fragmentShaderText: `
                                              void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
                                              {
                                                  material.diffuse = vec3(0.0, 0.0, 1.0);
                                                  material.diffuse.g = -fsInput.attributes.positionEC.z / 1.0e3;
                                              }
                                              `,
                    }),
                }));

                model.readyPromise.then((model) => {
                    console.log(model.activeAnimations)
                    model.activeAnimations.addAll({
                        multiplier: 0.1,                        // Play at half-speed
                        //loop: Cesium.ModelAnimationLoop.REPEAT ,     // Loop the animations
                        removeOnStop:true,
                        reverse:false
                    });
                });
                this.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(105.0, 40.0, 1000.0), // 设置位置
                    orientation: {
                        heading: Cesium.Math.toRadians(20.0), // 方向
                        pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
                        roll: 0
                    }
                })
            }
        },

    }
</script>

